<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="lib/vue.js"></script>
</head>
<body>
    <div id="app">
        <!-- 模版语法-插值-文本 --- 双大括号语法 -->
        {{ msg }}
        <!-- 模版语法-插值-原始 HTML --- 解析输出 -- 商品详情-->
        <div v-html="msg"></div>
        <div v-text="msg"></div>
        <!-- 模版语法-插值 - Attribute - 绑定属性-->
        <!-- 如果属性的值是变量，boolean，number类型，对象，数组，null，undefined，时，需要使用绑定属性 -->
        <div class="btn" v-bind:class="str"></div>
        <div v-bind:test="true"></div>
        <div v-bind:num="100"></div>
        <div v-bind:obj="{ a: 1 }"></div>
        <div v-bind:arr="[1, 2, 3]"></div>
        <!-- 模版语法-插值 - 表达式 -- 简单表达式 -->
        {{ msg.split('').reverse().join('') }}
      </div>
    </body>
    <script>
      new Vue({
        el: '#app',
        data: {
          msg: '<h1>hello vue</h1>',
          str: 'btn-success'
        }
      })
    </script>
</body>
</html>